import React, { Component } from 'react';
import { View, Text, Image, ScrollView, StyleSheet, TouchableOpacity, Platform, CameraRoll, NativeModules, PermissionsAndroid, Linking } from 'react-native';
import constants from '../../utils/constants';
import moment from 'moment';
import { Modal, Button, List, Flex, Toast } from 'antd-mobile-rn';
import { captureRef } from "react-native-view-shot";
import JShareModule from 'jshare-react-native';
import api from '../../utils/api';
import Permissions from "react-native-permissions"


const styles = StyleSheet.create({
    shareImageBox: {
        width: 50,
        height: 50,
        backgroundColor: "#ffff",
        alignContent: "center",
        alignItems: "center",
        marginBottom: 10
    },
    shareItemText: {
        fontSize: 12,
        textAlign: "center",
        color: "#666"
    }
})

export default class UserPoster extends Component {

    static navigationOptions = (e) => {

        const { state } = e.navigation;

        const onSaveClick = () => {

            state.params.onSaveClick();

        }

        return {
            headerTintColor: 'black',
            headerBackTitle: null,
            headerStyle: {
                backgroundColor: '#ffffff',
                borderBottomWidth: 0,
                shadowOpacity: 0,
                elevation: 0,
            },
            headerRight: (
                <Text onPress={onSaveClick} style={{ marginRight: 20, fontSize: 18, color: "#000", fontWeight: "300" }}>分享</Text>
            )
        }
    }

    state = {
        showModel: false
    }

    componentDidMount() {
        if (Platform.OS === 'ios') {
            JShareModule.setup();
        }
        this.props.navigation.setParams({
            onSaveClick: () => {

                this.setState({
                    showModel: true
                })
            }
        })
    }

    getPosterImage = (platform, success) => {

        //rnfs.downloadFile()

        captureRef(this.refs.poster, {
            format: "jpg",
            quality: 0.5,
            result: Platform.OS === "ios" ? "tmpfile" : (platform == "saveLocal" ? "tmpfile" : "base64"),

        }).then(uri => {
            console.log("uri::", uri);
            if (Platform.OS === "android") {
                console.log(Platform.Version);
            }

            success(uri);
        }, error => {
            console.log("error::", error);
        }
        )
    }

    onShareClick = (platform) => {
        this.getPosterImage(platform, (uri) => {
            this.setState({
                showModel: false
            })
            if (platform === "saveLocal") {


                if (Platform.OS === "ios") {
                    Permissions.request("photo").then(r => {
                        //Toast.info(r);
                        if ("denied" == r) {
                            Toast.info("没有保存图片的权限，打开应用开启权限", 1.5, () => {
                                Linking.openURL("app-settings:").then(data => {
                                    Toast.info(data);
                                }).catch(err => {

                                })
                            });

                        }
                        if ("authorized" == r) {
                            CameraRoll.saveToCameraRoll(uri, "photo").then(value => {
                                console.log("save image ::", value);
                                Toast.info("保存图片成功");
                            }).catch((e) => {
                                console.log("error..", e);
                                Toast.info("保存图片失败");
                            })
                        }
                        //console.log("s:",r);         
                    }).catch(() => {
                        Toast.info("error");
                    })
                    return;
                }


                if (Platform.OS == "android" && Platform.Version >= 23) {
                    PermissionsAndroid.request("android.permission.WRITE_EXTERNAL_STORAGE").then(value => {
                        console.log("value:", value);
                        if (value === "denied") {
                            Toast.info("保存图片失败");
                            return;
                        }
                        CameraRoll.saveToCameraRoll(uri, "photo").then(value => {
                            Toast.info("保存图片成功");
                            console.log("save image ::", value);
                        }).catch((e) => {
                            console.log("error..", e);
                            Toast.info("保存图片失败");
                        })
                    }).catch(vaue => {

                    })
                    return;
                }
                return;
            }

            if (Platform.OS === "ios") {

                JShareModule.share({
                    type: 'image',
                    platform: platform,  // 分享到指定平台
                    imagePath: uri  // 本地图片路径 imagePath, imageUrl imageArray 必须三选一
                }, () => {

                }, (e) => {

                    Toast.info("分享失败")

                })
            } else {

                PermissionsAndroid.request("android.permission.WRITE_EXTERNAL_STORAGE").then(value => {
                    console.log("value:", value);
                    if (value === "denied") {
                        Toast.info("分享失败,没有图片访问权限");
                        return;
                    }
                    JShareModule.share({
                        type: 'image',
                        platform: platform,  // 分享到指定平台
                        imageBase64: uri // 本地图片路径 imagePath, imageUrl imageArray 必须三选一
                    }, () => {
                        Toast.info("分享成功")
                    }, (e) => {
                        console.log("e::", e);
                        //Toast.info("分享失败"+JSON.stringify(e))

                    })

                }).catch(vaue => {

                })

            }

        })
    }

    render() {

        const { getParam } = this.props.navigation

        const target = getParam("target", {});
        return (
            <View>
                <ScrollView>
                    <View ref="poster" style={{ backgroundColor: "#fff", flex: 1, padding: 5 }}>
                        <View style={{ padding: 30, backgroundColor: "#ffffff" }}>
                            <View style={{ alignContent: "center", alignItems: "center" }}>
                                <Text style={{
                                    fontSize: 70,
                                    fontWeight: "500",
                                    color: constants.themeColor
                                }} >{target.targetScore}</Text>
                            </View>
                            <View style={{ alignContent: "center", alignItems: "center", padding: 30 }}>

                                <Text style={{
                                    fontSize: 30,
                                    fontWeight: "400",
                                    color: constants.themeColor,
                                    textAlign: "center"
                                }} >{target.declaration}</Text>

                            </View>
                            <View style={{ alignContent: "center", alignItems: "center", marginBottom: 20 }}>
                                <Text style={{
                                    fontSize: 40,
                                    fontWeight: "400",
                                    color: "orange"
                                }} >{target.enrollStatus == 1 ? "已报名" : "未报名"}</Text>
                            </View>
                            <View style={{ alignContent: "center", alignItems: "center", marginBottom: 20 }}>
                                <Text style={{
                                    fontSize: 40,
                                    fontWeight: "400",
                                    color: "orange"
                                }} >{target.examDate ? (moment(target.examDate).format("YYYY.MM.DD")) : ""}</Text>
                            </View>
                            <View style={{ alignContent: "center", alignItems: "center", marginBottom: 50 }}>
                                <Text style={{
                                    fontSize: 40,
                                    fontWeight: "400",
                                    color: "orange"
                                }} >{target.examAddress}</Text>
                            </View>
                            <View style={{ alignContent: "center", alignItems: "center" }}>
                                <Image style={{ width: 120, height: 50 }} source={require("./img/s.png")}></Image>

                            </View>
                        </View>

                    </View>
                </ScrollView>
                <Modal
                    popup
                    visible={this.state.showModel}
                    maskClosable={true}
                    animationType="slide-up"
                    onClose={() => {

                    }}
                >
                    <View style={{ paddingVertical: 20, paddingHorizontal: 20, backgroundColor: "#ddd" }}>
                        <Flex>
                            <Flex.Item style={{ alignContent: "center", alignItems: "center" }}>
                                <TouchableOpacity onPress={() => {
                                    this.onShareClick("saveLocal")
                                }}>
                                    <View style={styles.shareImageBox}>
                                        <Image style={{ width: 30, height: 30, marginTop: 10 }} source={require("./img/save.png")}></Image>
                                    </View>
                                </TouchableOpacity>
                                <View>
                                    <Text style={styles.shareItemText}>保存图片</Text>
                                </View>
                            </Flex.Item>
                            <Flex.Item style={{ alignContent: "center", alignItems: "center" }}>
                                <TouchableOpacity onPress={() => {
                                    this.onShareClick("wechat_timeLine")
                                }}>
                                    <View style={styles.shareImageBox}>
                                        <Image style={{ width: 30, height: 30, marginTop: 10 }} source={require("./img/pyq.png")}></Image>
                                    </View>
                                </TouchableOpacity>
                                <View>
                                    <Text style={styles.shareItemText}>朋友圈</Text>
                                </View>
                            </Flex.Item>
                            <Flex.Item style={{ alignContent: "center", alignItems: "center" }}>
                                <TouchableOpacity onPress={() => {
                                    this.onShareClick("wechat_session")
                                }}>
                                    <View style={styles.shareImageBox}>
                                        <Image style={{ width: 30, height: 30, marginTop: 10 }} source={require("../login/img/weixin.png")}></Image>
                                    </View>
                                </TouchableOpacity>
                                <View>
                                    <Text style={styles.shareItemText}>微信好友</Text>
                                </View>
                            </Flex.Item>
                            <Flex.Item style={{ alignContent: "center", alignItems: "center" }}>
                                <TouchableOpacity onPress={() => {
                                    this.onShareClick("qq")
                                }}>
                                    <View style={styles.shareImageBox}>
                                        <Image style={{ width: 30, height: 30, marginTop: 10 }} source={require("../login/img/qq.png")}></Image>
                                    </View>
                                </TouchableOpacity>
                                <View>
                                    <Text style={styles.shareItemText}>QQ</Text>
                                </View>
                            </Flex.Item>
                        </Flex>
                    </View>
                    <Button type="primary" style={{ borderRadius: 0, backgroundColor: "#fff", borderWidth: 0 }} activeStyle={{ backgroundColor: "#fff" }} onClick={() => {
                        this.setState({
                            showModel: false
                        })
                    }}>
                        <Text style={{ color: "#000" }}>取消</Text>
                    </Button>
                </Modal>

            </View>
        )

    }
}